<template>
  <el-config-provider :locale="locale">
    <router-view></router-view>
  </el-config-provider>
</template>
<script setup lang="ts">
import { ElConfigProvider } from 'element-plus'
import { languageList } from '@/config'
import { getLightDarkColor } from '@/config/setting_theme'
import { useLayoutStore } from '@/store/Layout'
import { getItem } from '@/utils/auth'
const store = useLayoutStore()
const { theme } = storeToRefs(store)
const locale = computed(() => {
  return languageList.find(item => item.value === (getItem('localeLang') || 'zhCn'))?.element
})
// 监听主题色以及暗黑模式
watch(
  () => theme.value,
  new_primary => {
    const body = document.documentElement as HTMLElement
    if (new_primary.isDark) body.setAttribute('class', 'dark')
    else body.setAttribute('class', '')
    document.body.style.setProperty('--el-color-primary', new_primary.primary)
    const ldList = ['light', 'dark']
    // 颜色加深或变浅
    for (let i = 1; i <= 9; i++) {
      for (let j = 0; j <= ldList.length - 1; j++) {
        document.documentElement.style.setProperty(
          `--el-color-primary-${ldList[j]}-${i}`,
          theme.value.isDark
            ? `${getLightDarkColor(new_primary.primary, i / 10, true)}`
            : `${getLightDarkColor(new_primary.primary, i / 10)}`
        )
      }
    }
  },
  {
    immediate: true,
    deep: true
  }
)
</script>
<style lang="scss">
@import './assets/styles/sass/index.scss';
</style>
